import React from 'react'
import { useLocation } from 'react-router-dom';
import HeadNav from '../../components/HeadNav';
import style from './index.module.scss';
import { useNavigate } from 'react-router-dom';
import Bottom from '../../components/Button';
import Star from '@mui/icons-material/StarBorder';
import Chip from '@mui/material/Chip';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import Timer  from '@mui/icons-material/Timer';
import AddLocationIcon from '@mui/icons-material/AddLocation';
import EventBusyIcon from '@mui/icons-material/EventBusy';
import Divider from '@mui/material/Divider';
import List from '@mui/material/List';
import Avatar from '@mui/material/Avatar';

import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';



export default function WorkDetail() {
    let data = {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: [
            {
                title: '温馨提示',
                content: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)'
            },
            {
                title: '工作内容',
                content: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)'
            },
            {
                title: '工作提示',
                content: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)'
            }
        ],
        contactMethods: {
            title: '联系方式',
            content: '请架微信1111111111111111111123451345'
        },
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: 'Apricity',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg',
        workTime: '任意时期',
        workTime2: '09.00~17.00',
        workLocation: '湖南信息学院',
        workLimit: [
            {
                title: '18~35岁'
            },
            {
                title: '男'
            },
            {
                title: '155cm~175cm'
            }
        ],
        selectPerson: 1330 
      }
    const { _id, title, detail, tag, price, methods, publicNickName, publicInfo, workTime, workTime2, workLocation, workLimit, selectPerson, contactMethods } = data
    const {state: {isHide,isShowContact,id}} = useLocation();
    console.log(isHide,isShowContact,id)
    const navigate = useNavigate();
    const leftClick = () => {
        navigate(-1);
    }
    const BtnClick = () => {
        console.log('立即报名')
    }
    // 渲染头部区域
    const renderHeader = () => {
        return (
                <div className={style.head}>
                    <div className={style.title}>
                        <div className={style.title_text}>
                            {title}
                        </div>
                        <div className={style.price}>
                            {price + '元/' + methods}
                        </div>
                        <div className={style.tag}>
                            {tag.map((item) => {
                                    return (
                                        <Chip
                                        size="small"
                                        label={item.name}
                                        variant="outlined"
                                        style={{marginRight: '5px',marginTop: '5px'}}
                                    />
                                )
                            })}
                        </div>
                    </div>
                </div>
        )
    }

    // 渲染限制要求区域
    const renderLimit = () => {
        return (
            <div className={style.box}>
                    { workTime ? (
                        <div className={style.item}>
                        <div className={style.item_top}>
                            <CalendarMonthIcon style={{color: '#303133'}}  sx={{ fontSize: 14,marginRight: '5px',marginTop: '1px'}}></CalendarMonthIcon>
                            工作日期
                        </div>
                        <div className={style.item_bottom}>
                            {workTime}
                        </div>
                    </div>
                    ) : ''}
                    { workTime2 ? (
                        <div className={style.item}>
                        <div className={style.item_top}>
                            <Timer style={{color: '#303133'}}  sx={{ fontSize: 14,marginRight: '5px',marginTop: '1px'}}></Timer>
                            工作时段
                        </div>
                        <div className={style.item_bottom}>
                            {workTime2}
                        </div>
                    </div>
                    ) : ''}
                    { workLocation ? (
                        <div className={style.item}>
                        <div className={style.item_top}>
                            <AddLocationIcon style={{color: '#303133'}}  sx={{ fontSize: 14,marginRight: '5px',marginTop: '1px'}}></AddLocationIcon>
                            工作地点
                        </div>
                        <div className={style.item_bottom}>
                            {workLocation}
                        </div>
                    </div>
                    ) : ''}
                    { workLimit.length === 0 ? "" : (
                        <div className={style.item}>
                        <Divider/>
                        <div className={style.item_top} style={{marginTop: '10px'}}>
                            <EventBusyIcon style={{color: '#303133'}}  sx={{ fontSize: 14,marginRight: '5px',marginTop: '1px'}}></EventBusyIcon>
                            岗位要求
                        </div>
                        <div className={style.item_bottom} style={{display: 'flex'}}>
                            {workLimit.map((item) => {
                                return (
                                    <div className={style.limit}>
                                        {item.title}  
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                    ) }
                </div>
        )
    }

    // 渲染联系方式
    const renderContactMethods = () => {
        return (
            <div className={style.detail}>
                    <div className={style.detail_title}>
                        联系方式
                    </div>
                    <div className={style.detail_box}>
                        <div className={style.detail_item}>
                                    <div className={style.detail_head}>
                                            {'【' + contactMethods.title + '】'}
                                    </div>
                                    <div className={style.detail_content}>
                                            {contactMethods.content}
                                    </div>
                         </div>
                    </div>
                </div>
        )
    }
    

    // 渲染岗位详情
    const renderWorkDetail = () => {
        return (
            <div className={style.detail}>
                    <div className={style.detail_title}>
                        岗位详情
                    </div>
                    <div className={style.detail_box}>
                        { detail.map((item) => {
                            return (
                                <div className={style.detail_item}>
                                    <div className={style.detail_head}>
                                            {'【' + item.title + '】'}
                                    </div>
                                    <div className={style.detail_content}>
                                            {item.content}
                                    </div>
                                </div>
                            )
                        })}
                        <Divider/>
                        <div className={style.selectBox}>
                            { selectPerson + '人已报名'}
                        </div>
                    </div>
                </div>
        )
    }

    // 渲染发布者信息
    const renderPublic = () => {
        return (
                <div className={style.detail}>
                    <div className={style.detail_title}>
                        发布者信息
                    </div>
                    <div className={style.detail_box2}>
                        <MenuItem>
                            <ListItemIcon>
                                <Avatar alt="User" src={publicInfo} />
                            </ListItemIcon>
                            <ListItemText style={{marginLeft: '10px'}}>{publicNickName}</ListItemText>
                            {/* <Typography variant="body2" color="text.secondary">
                            <ArrowForwardIosIcon sx={{ fontSize: 16 }}></ArrowForwardIosIcon>
                            </Typography> */}
                        </MenuItem>
                    </div>
                </div>
        )
    }

    // 渲染底部bottom
    const renderBottom = () => {
        return (
            <div className={style.bottom}>
                <div className={style.bottom_left}>
                        <div className={style.bottom_icon}>
                            <Star style={{color: '#303133'}}  sx={{ fontSize: 16}} />
                        </div>
                        <div className={style.bottom_text}>
                            收藏
                        </div>
                    </div>
                    {isHide ? '' : <div className={style.bottom_right}>
                        <Bottom background={'#1976d2'} width={'70vw'} BtnClick={BtnClick} text={"立即报名"}  isAll={false} isShadow={false} borderRadius={'15px'} fontSize={'14px'}></Bottom>
                    </div>}
            </div>    
        )
    }
    return (
        <>
            <List className={style.content}>
                <HeadNav leftClick={leftClick} title={"兼职详情"} isShadow={false} borderRadius={'0'} ></HeadNav>
                {renderHeader()}
                {renderLimit()}
                {isShowContact ? renderContactMethods() : ''}
                {renderWorkDetail()}
                {renderPublic()}
            </List>
            {renderBottom()}
        </>
    )
}
